<template>
  <div class="goods-detail">
    <!-- 属性 -->
    <ul class="attrs">
      <li v-for="item in goods.details.properties" :key="item.name">
        <span class="dt">{{ item.name }}: </span>
        <span class="dd">{{ item.value }}</span>
      </li>
    </ul>

    <!-- 图片 -->
    <img v-for="item in goods.details.pictures" :key="item" v-lazy="item" alt="">
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  name: 'GoodsDetail',
  setup() {
    const goods = inject('goods')
    console.log(goods)
    return {
      goods
    }
  }
}
</script>

<style lang="less" scoped>

.goods-detail {
  padding: 40px;

  .attrs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;

    li {
      // 这一行很重要
      width: 50%;
      display: flex;
      margin-bottom: 10px;

      .dt {
        width: 100px;
        color: #999;
      }

      .dd {
        flex: 1;
        color: #666;
      }
    }
  }

  > img {
    width: 100%;
  }
}
</style>
